<template>
    <view class="uploader-container flex wrap">
        <u-upload
            @on-change="handleCallback"
            @on-uploaded="uploadSuccess"
            @on-progress="uploading"
            @on-error="uploadError"
            :action="action"
            :header="{ token: token, version: versions }"
            :deletable="deletable"
            :max-count="maxUpload"
            :showProgress="showProgress"
            @on-remove="remove"
            :multiple="mutiple"
            :width="previewSize"
            :height="previewSize"
            ref="upload"
        >
            <!-- <view
        slot="addBtn"
        class="uplader-upload"
        hover-class="slot-btn__hover"
        hover-stay-time="150"
      >
        <u-icon size="48" color="#dcdee0" name="camera" />
        <view class="xs m-t-10">
          {{ fileList.length >= 1 ? fileList.length + "/" + maxUpload : tips }}
        </view>
      </view> -->
        </u-upload>
    </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { version } from '@/config/app'
import { toast } from '@/utils/util'
import UUpload from '../../uni_modules/vk-uview-ui/components/u-upload/u-upload.vue'

const userStore = useUserStore()
/** Emit Start **/
const emit = defineEmits(['update:modelValue'])
/** Emit End **/

/** Props Start **/
const props = withDefaults(
    defineProps<{
        mutiple?: boolean // 默认不允许多选图片
        maxUpload?: number // 限制上传文件数量
        previewSize?: string // upload显示的大小
        deletable?: boolean // 是否可删除
        tips?: string //提示
        showProgress?: true // 是否显示进度条
    }>(),
    {
        mutiple: false,
        maxUpload: 1,
        previewSize: '160',
        deletable: true,
        tips: '上传图片',
        showProgress: true
    }
)
/** Props End **/

/** Data Start **/
const action = ref<string | null>('')
const token = ref<string | null>('')
const fileList = ref<Array<any>>([])
const versions = ref<string | null>(version)
const failList = ref<number[]>([])
/** Data End **/

/** Methods Start **/
/**
 * @param { params } 上传返回值
 * @return { void }
 * @description 上传，不管成不成功都返回数据｜提示
 */
const handleCallback = (params: any) => {
    if (JSON.parse(params.data).code == 200) {
        fileList.value.push(JSON.parse(params.data).data.path)
        emit('update:modelValue', fileList.value)
    }
}

/**
 * @param { event } 索引值
 * @return { void }
 * @description 删除一个图片
 */
const remove = (event: number) => {
    fileList.value.splice(event, 1)
    emit('update:modelValue', fileList.value)
}

//上传完成
const uploadSuccess = (lists: any) => {
    // console.log(lists)
    if (failList.value.length != 0) {
        toast(`第${failList.value.toString()}张图片上传失败！`)
        failList.value = []
    } else {
        toast('上传成功！')
    }
}

//上传中
const uploading = () => {
    // toast('上传中！')
}

//上传失败
const uploadError = (res: any, index: number) => {
    failList.value.push(index + 1)
}

/** Methods End **/

/** Life Cycle Start **/
onMounted(() => {
    action.value = `${import.meta.env.VITE_APP_BASE_URL}/api/upload/image`
    token.value = userStore.token
})
/** Life Cycle End **/
</script>

<style lang="scss" scoped>
.uploader-container {
    .uplader-upload {
        position: relative;
        width: 160rpx;
        height: 160rpx;
        padding-top: 30rpx;
        text-align: center;
        margin: 11rpx;
        border: 2px dashed #e5e5e5;
        background-color: #ffffff;

        > view {
            color: #bbb;
        }
    }
}
</style>
